<template>
	<view>
		<view>
			<!-- <view class="od-banner">
				<image class="od-banner-icon" src="/static/resource/images/od_bg_icon.png" mode="widthFix" />
				<view class="od-jd od-jd-0">
					<view class="od-jd-out">
						<view class="od-jd-in"></view>
					</view>
					<view class="vp-flex od-jd-text">
						<view class="vp-flex_1">
							<text class="od-jd-st-0">填写订单</text>
						</view>
						<view class="vp-flex_1">
							<text class="od-jd-st-10">在线支付</text>
						</view>
						<view class="vp-flex_1">
							<text class="od-jd-st-20">专人服务</text>
						</view>
						<view class="vp-flex_1">
							<text class="od-jd-st-30">服务完成</text>
						</view>
					</view>
				</view>
			</view> -->
			<view style="height: 50rpx"></view>
			<view>
				<view class="pub-box">
					<!-- <view class="pub-box-tt" style="color: black;">订单信息</view> -->
					<uni-section class="mb-10" title-font-size="30rpx" title="订单信息" title-color="#000" sub-title=""
						type="line"> </uni-section>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">服务类型</view>
							</view>
							<view class="weui-cell__bd">
								<view class="weui-input" style="text-align: right" placeholder-class="vp-placeholder">
									{{orderDetail.serviceTitle}}
								</view>
							</view>
						</view>
					</view>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">订单编号</view>
							</view>
							<view class="weui-cell__bd">
								<view class="weui-input" style="text-align: right" placeholder-class="vp-placeholder">
									{{orderNumber}}
								</view>
							</view>
						</view>
					</view>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">下单时间</view>
							</view>
							<view class="weui-cell__bd">
								<view class="weui-input" style="text-align: right" placeholder-class="vp-placeholder">
									{{orderDetail.createTime}}
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="pub-box">
					<!-- <view class="pub-box-tt" style="color: black;">支付信息</view> -->
					<uni-section class="mb-10" title-font-size="30rpx" title="支付信息" title-color="#000" sub-title=""
						type="line"> </uni-section>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">订单金额</view>
							</view>
							<view class="weui-cell__bd">
								<view class="weui-input" style="text-align: right;color: black;font-size: 24px;"
									placeholder-class="vp-placeholder">
									￥{{order.amount}}.00
								</view>
							</view>
						</view>
					</view>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">支付方式</view>
							</view>
							<view class="weui-cell__bd">
								<view class="weui-input" style="text-align: right" placeholder-class="vp-placeholder">
									余额支付
								</view>
							</view>
						</view>
					</view>
					<view class="pub-box-bd" v-if="order.status !== 5 && order.status !== 1 && orderRefund === null">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label"></view>
							</view>
							<view class="weui-cell__bd">
								<button
									style="border-radius: 40rpx;width: 200rpx;font-size: 25rpx;color: #636363;margin-right: 0rpx;border: 1px solid #dcdcdc;"
									@tap="openpopup1()">
									退款</button>
							</view>
						</view>
					</view>
					<view class="pub-box-bd" v-if="orderRefund != null">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<!-- <view class="weui-label">操作</view> -->
							</view>
							<view class="weui-cell__bd" v-if="orderRefund.status == 1">
								<view class="weui-input" style="text-align: right;color: #4be300;" placeholder-class="vp-placeholder">
									退款成功
								</view>								
							</view>
							<view class="weui-cell__bd" v-if="orderRefund.status == 0">								
								<view class="weui-input" style="text-align: right;color: #ffaa00;" placeholder-class="vp-placeholder">
									退款中
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="pub-box">
					<!-- <view class="pub-box-tt" style="color: black;">预约信息</view> -->
					<uni-section class="mb-10" title-font-size="30rpx" title="预约信息" title-color="#000" sub-title=""
						type="line"> </uni-section>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">医院名称</view>
							</view>
							<view class="weui-cell__bd">
								<view class="weui-input" style="text-align: right" placeholder-class="vp-placeholder">
									{{orderDetail.hospital}}
								</view>
							</view>
						</view>
					</view>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">服务需求</view>
							</view>
							<view class="weui-cell__bd">
								<view class="weui-input" style="text-align: right" placeholder-class="vp-placeholder">
									{{orderDetail.special}}
								</view>
							</view>
						</view>
					</view>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">期望就诊时间</view>
							</view>
							<view class="weui-cell__bd">
								<view class="weui-input" style="text-align: right" placeholder-class="vp-placeholder">
									{{orderDetail.serviceTime}}
								</view>
							</view>
						</view>
					</view>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">就诊人</view>
							</view>
							<view class="weui-cell__bd">
								<view class="weui-input" style="text-align: right" placeholder-class="vp-placeholder">
									{{patient.name}}
								</view>
							</view>
						</view>
					</view>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">就诊人性别</view>
							</view>
							<view class="weui-cell__bd">
								<view class="weui-input" style="text-align: right" placeholder-class="vp-placeholder">
									{{gender}}
								</view>
							</view>
						</view>
					</view>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">就诊人年龄</view>
							</view>
							<view class="weui-cell__bd">
								<view class="weui-input" style="text-align: right" placeholder-class="vp-placeholder">
									{{age}}
								</view>
							</view>
						</view>
					</view>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">就诊人手机号</view>
							</view>
							<view class="weui-cell__bd">
								<view class="weui-input" style="text-align: right" placeholder-class="vp-placeholder">
									{{patient.phone}}
								</view>
							</view>
						</view>
					</view>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">就诊人身份证号</view>
							</view>
							<view class="weui-cell__bd">
								<view class="weui-input" style="text-align: right" placeholder-class="vp-placeholder">
									{{number}}
								</view>
							</view>
						</view>
					</view>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">联系人</view>
							</view>
							<view class="weui-cell__bd">
								<view class="weui-input" style="text-align: right" placeholder-class="vp-placeholder">
									{{order.phone}}
								</view>
							</view>
						</view>
					</view>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">紧急联系人</view>
							</view>
							<view class="weui-cell__bd">
								<view class="weui-input" style="text-align: right" placeholder-class="vp-placeholder">
									{{patient.emergencyContactPhone}}
								</view>
							</view>
						</view>
					</view>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">基础病</view>
							</view>
							<view class="weui-cell__bd">
								<view class="weui-input" style="text-align: right" placeholder-class="vp-placeholder">
									{{patient.backgroundDisease}}
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view v-if="order.status != '1'" style="height: 50rpx"></view>

			<view style="height: 300rpx" v-if="order.status == '1'"></view>

			<!-- 悬浮提交按钮 -->
			<view class="vp-foot" v-if="order.status == '1'">
				<view style="background: #ffffff; padding: 20rpx">
					<view class="xieyi" style="text-align: center">
						<text>请在1小时内完成支付，超时订单自动取消</text>
					</view>
					<view>
						<button :class="'btnp ' + (is_xieyi ? '' : 'btnp-disabled')" @click="submitOrder">
							立即支付
							<block v-if="order.amount > 0">（支付{{ order.amount }}元）</block>
						</button>
					</view>
				</view>
			</view>
			<uni-popup ref="popup" type="bottom" border-radius="20px 20px 0 0" class="key_main" backgroundColor="#fff">
				<view class="main_title">
					<u-icon class="title_icon" name="close" bold @click="hideFun" />
					<text>请输入交易密码</text>
					<view class="title_forget" @tap="forgetFun">
						忘记密码
					</view>
				</view>
				<view class="main_content">
					<view class="content_num">
						<view v-for="item in pwdLen" :key="item" class="content_item">
							{{ password[item - 1] ? '●' : '' }}
						</view>
					</view>
					<!-- <view class="error_text">
						密码错误，还可输入{{ count }}次
					</view> -->
				</view>
				<view class="main_keyboard">
					<view v-for="item in numberLen" :key="item" class="key_num" @tap="inputNumFun({ num: item })">
						{{ item }}
					</view>
					<view class="key_null" />
					<view class="key_0" @tap="inputNumFun({ num: 0 })">
						0
					</view>
					<view class="key_del" @tap="delNumFun">
						<!-- <image src="/static/images/remove.jpg" mode="aspectFill" /> -->
						<uni-icons type="trash-filled" size="25"></uni-icons>
					</view>
				</view>

			</uni-popup>
			<uni-popup ref="popup1" type="bottom" border-radius="20px 20px 0 0" class="key_main" backgroundColor="#fff">
				<view class="main_title">
					<view style="align-items: center;">请选择退款原因:</view>
				</view>
				<radio-group @change="radioChange" style="display: flex; flex-direction: column;">
					<label v-for="(item, index) in items" :key="item.value" style="display: flex; align-items: center;margin-bottom: 20rpx;margin-left: 20rpx;">
						<view>
							<radio :value="item.value" :checked="index === current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
				<view>
					<button :class="'btnp ' + (is_xieyi ? '' : 'btnp-disabled')" @click="cancelOrder()">
						提交申请
					</button>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				is_xieyi: true,
				gender: '', // 性别
				number: '', //身份证
				age: '',
				isLogin: true,
				orderNumber: '', //订单编号
				order: '', //订单
				orderDetail: '',
				service: '',
				patient: '',
				address: '',
				orderRefund: '',
				pwdLen: 6, //输入密码的长度
				numberLen: 9, //密码键盘的数字
				password: '', //密码
				count: 6,
				show: false,
				items: [{
						value: '1',
						name: '协商一致退款',
						checked: 'true'
					},
					{
						value: '2',
						name: '不需要了'
					},
					{
						value: '3',
						name: '信息填错了'
					},
					{
						value: '4',
						name: '不愿提供身份证信息'
					},
					{
						value: '5',
						name: '服务不满意'
					},
					{
						value: '6',
						name: '未按规定时间提供服务'
					},
					{
						value: '7',
						name: '其他'
					},
				],
				current: 0
			};
		},
		onLoad: function(option) {
			// console.log('测试')
			this.orderNumber = option.id
			// this.orderNumber = '17118649289533d4dfb30'
			// 获取页面数据
			this.getinfo()


		},

		methods: {
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
				// console.log(this.items[this.current])
			},
			openpopup1() {
				this.$refs.popup1.open('bottom')
			},
			cancelOrder() {
				// console.log('退款测试')

				uni.request({
					url: 'http://localhost:8080/api/order/cancel',
					data: {
						id: this.order.id,
						content: this.items[this.current].name
					},
					method: 'GET',
					success: (res) => {
						if (res.data.code == '200') {
							wx.switchTab({
								url: '/pages/order/index' // 替换成您要跳转的 TabBar 页面路径
							});
						} else {

						}
					}
				})

			},

			inputNumFun(op) {
				if (this.password.length <= 6) {
					this.password += op.num;
					if (this.password.length !== this.pwdLen) return;
					this.handleSubmit();
				}
			},
			delNumFun() {
				if (this.password.length == 0) return;
				this.password = this.password.substring(
					0,
					this.password.length - 1
				);
			},
			forgetFun() {
				uni.showToast({
					title: '忘记密码操作',
					icon: 'none',
				});
			},
			hideFun() {
				this.$refs.popup.close()
			},
			async handleSubmit() {

				try {
					uni.request({
						url: 'http://localhost:8080/api/balance/pay',
						data: {
							userid: this.order.userId,
							money: this.order.amount,
							notes: this.orderDetail.serviceTitle,
							password: this.password,
							orderNumber: this.orderNumber,
						},
						method: 'Post',
						success: (res) => {
							if (res.data.code == '200') {
								console.log("支付成功")
								uni.reLaunch({
									url: '/pages/index/buy/success/success'
								});
							} else {

							}
						}
					})

				} catch (e) {
					// error
				}
			},

			submitOrder() {
				// this.show =true
				this.$refs.popup.open('bottom')
			},
			//获取地址信息
			getinfo() {
				if (this.isLogin == true) {
					try {
						uni.request({
							url: 'http://localhost:8080/api/order/orderDetail1',
							data: {
								orderNumber: this.orderNumber,
							},
							method: 'GET',
							success: (res) => {
								if (res.data.code == '200') {
									this.order = res.data.data.order
									this.orderDetail = res.data.data.orderDetail
									this.patient = res.data.data.patient
									this.address = res.data.data.address
									this.orderRefund = res.data.data.orderRefund
									this.calculateInfo()
								} else {

								}
							}
						})

					} catch (e) {
						// error
					}
				}
			},

			calculateInfo() {
				// 判断身份证号码长度是否合法
				this.number = this.patient.number
				if (this.number.length !== 18) {
					console.log("身份证号码不符合")
					return;
				}
				// 截取出生日期部分
				const birthDate = this.number.substring(6, 14);
				// 解析出生日期
				const year = parseInt(birthDate.substring(0, 4));
				const month = parseInt(birthDate.substring(4, 6));
				const day = parseInt(birthDate.substring(6, 8));
				// 计算年龄
				const now = new Date();
				const age = now.getFullYear() - year - 1;
				if (now.getMonth() + 1 > month || (now.getMonth() + 1 === month && now.getDate() >= day)) {
					this.age = age + 1;
				} else {
					this.age = age;
				}

				// 判断性别
				const genderCode = parseInt(this.number.charAt(16));
				this.gender = genderCode % 2 === 0 ? '女' : '男';
			}
		},
	};
</script>

<style>
	@import '../../index/buy/pay.css';
</style>